<!DOCTYPE html>
<html xmlns:th="Thymeleaf" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <th:block th:include="common/include :: header('角色列表')" />
</head>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add_lay"><i class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="updata_lay"><i class="layui-icon">&#xe642;</i>修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete_lay"><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh_lay"><i class="layui-icon">&#xe666;</i>刷新</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<th:block th:include="common/include :: footer" />
<script type="text/javascript" th:inline="none">
    var baseurl = ctx + 'roleAction';
    layui.use('table', function(){
        var table = layui.table;

        var renderTable = function(){
            table.render({
            elem: '#test'
            ,url:baseurl+'/roleList'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type:'radio',align: 'center'}
                ,{field:'rolename', title:'角色标识',  align: 'center'}
                ,{field:'roleremark', title:'角色名称', align: 'center'}
                ,{field:'valid', title:'状态',align: 'center', templet: function(res){
                        if(res=='1'){
                            return '启用';
                        }else{
                            return '无效';
                        }
                    }
                }
                ,{field:'createtime', title:'创建时间', align: 'center'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150,align: 'center'}
            ]]
            ,page: true
        });
        }
        renderTable();
        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch(obj.event){
                case 'add_lay':
                    $.modal.open("添加菜单", ctx+'roleAction/page/roleAdd',"","",renderTable);
                    break;
                case 'updata_lay':
                    var id = data[0].id;
                    $.modal.open("编辑角色", ctx+'roleAction/page/roleEdit/'+id,"","",renderTable);
                    break;
                case 'delete_lay':
                    var id = data[0].id;
                    layer.confirm('真的删除行么', function(index){
                        $.operate.delete(ctx+'roleAction/roleDel/'+id,renderTable);
                        layer.close(index);
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'refresh_lay':
                    renderTable();
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.operate.delete(ctx+'roleAction/roleDel/'+data.id,renderTable);
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                $.modal.open("编辑角色", ctx+'roleAction/page/roleEdit/'+data.id,"","",renderTable);
            }
        });
    });
</script>
</body>
<style>
    body{
        height: auto !important;
    }
    .layui-table{
        width: 100% !important;
    }
</style>
</html>
